<template>
  <div id="app">
    <div class="home">
      <el-container class="bo">
        <el-header><HomeTop /></el-header>
        <el-container class="zh">
          <el-aside width="200px"><HomeLeft /></el-aside>
          <el-main>
            <router-view />
          </el-main>
        </el-container>
        <el-footer><Footer /></el-footer>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import HomeTop from "./components/Home/HomeTop.vue";
import HomeLeft from "./components/Home/HomeLeft.vue";
import Footer from "./components/footer/footer.vue";
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  font-family: "微软雅黑";
}
.home {
  width: 1280px;
  margin: 0 auto;
  border: 1px solid #cccc;
}
.zh {
  height: 600px;
}
.bo {
  position: relative;
}
.el-header {
  padding: 0 9px;
}
.el-footer {
  background-color: #ffffff;
  box-shadow: 0px 2px 3.4px 0.6px rgba(0, 0, 0, 0.39);
  border-top: 1px solid #e1e1e1;
  position: absolute;
  bottom: -44px;
  width: 100%;
  height: 80px;
  padding-top: 10px;
  z-index: 2;
}
</style>
